<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <title>直播间</title>
    <link rel="stylesheet" type="text/css" href="css/videoLive.css">
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="page" class="uf uf-ver">
    <div class="videoDiv">
        <video src="http://play.zhibo.yngw518.com/live/weixin.m3u8"
               poster="image/static/liveVideoPoster.jpg"
               onclick="videoPlay(this,event)"
               onerror="stalled()" onstalled="stalled()"
               onplay="videoBy(this,1)" onpause="videoBy(this,0)"
               x-webkit-airplay="true"
               webkit-playsinline="true"
               playsinline="true"
               x5-video-player-type="h5"
               x5-video-player-fullscreen="true"></video>
        <div class="videoBy playCenter"></div>
        <!--<div id="videoStatus" class="videoBy status winColor">直播中</div>-->
        <div class="videoBy info">
            <div class="videoInfo uf">
                <div class="uf-f title">暂无直播</div>
                <!--<div class="author"></div>-->
            </div>
        </div>
    </div>
    <div class="uf">
        <div onclick="showPop('teacher')" class="nav uf-f uf uf-ac uf-pc">老师介绍</div>
        <div onclick="showPop('code')" class="nav uf-f uf uf-ac uf-pc">老师助理</div>
        <div onclick="showPop('course')" class="nav uf-f uf uf-ac uf-pc">课程安排</div>
    </div>
    <div class="uf-f u-scroll content">
        广告1<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告<br>广告0<br>

    </div>

    <div onclick="showPop('code')" class="footer">
        <div class="online"><span class="on">在线</span><span class="all">324人</span></div>
        <div class="login">登录
            <hr>
            注册
        </div>
        <div class="uf uf-ac">
            <div class="uf-f uf">
                <div class="box">@老师</div>
                <div class="box">公告区</div>
                <div class="box">私聊</div>
            </div>
            <div>游客5898</div>
            <div class="exit">退出</div>
        </div>
        <div class="uf output">
            <input class="uf uf-f" readonly>
            <div class="send uf uf-ac uf-pc">发送</div>
        </div>
    </div>
</div>

<!--蒙层-->
<div id="mask" class="POP CLOSE"></div>

<!--课程-->
<div class="CLOSE POP closeBk"></div>
<div id="course" class="POP u-scroll">
    <div class="courseTable">
        <div class="title">直播时间表</div>
        <table class="liveCourse">
            <tr>
                <td class="liveTimer">10:00-10:30</td>
                <td class="liveStatus"></td>
                <td class="liveTitle">牛股速递</td>
                <td>孙腾</td>
            </tr>
            <tr>
                <td class="liveTimer">10:30-11:30</td>
                <td class="liveStatus"></td>
                <td class="liveTitle">高手解盘</td>
                <td>闵庆华</td>
            </tr>
            <tr>
                <td class="liveTimer">13:30-14:30</td>
                <td class="liveStatus"></td>
                <td class="liveTitle">与牛共舞</td>
                <td>魏丹丹</td>
            </tr>
            <tr>
                <td class="liveTimer">14:30-15:00</td>
                <td class="liveStatus"></td>
                <td class="liveTitle">金股建仓</td>
                <td>孙腾</td>
            </tr>
            <tr>
                <td class="liveTimer">15:00-19:00</td>
                <td class="liveStatus"></td>
                <td class="liveTitle">经典课程</td>
                <td>节目录播</td>
            </tr>
            <tr>
                <td class="liveTimer">19:00-19:45</td>
                <td class="liveStatus"></td>
                <td class="liveTitle">赢家有道</td>
                <td>闵庆华</td>
            </tr>
            <tr>
                <td class="liveTimer">19:45-20:30</td>
                <td class="liveStatus"></td>
                <td class="liveTitle">股海争锋</td>
                <td>孙腾</td>
            </tr>
        </table>
    </div>
</div>

<!--微信二维码-->
<div id="code" class="POP u-scroll centerPop">
    <div class="CLOSE">×</div>
    <div class="title">
        有问题联系老师助理<br>
        微信：WeiWei95
    </div>
    <img class="codeImg" src="image/static/codeImg.png">
    <div class="txt">长按识别二维码，添加老师助理</div>

</div>

<!--老师介绍-->
<div id="teacher" class="POP u-scroll centerPop">
    <div class="CLOSE">×</div>
    <div class="title">老师介绍</div>
    <div class="teacher hl">
        <div class="name">孙腾</div>
        <div class="uf detail">
            <div class="pic">
                <img class="pic" src="image/teachers/4.png">
            </div>
            <div class="uf-f info">
                首席技术分析师<br>
                执业证号：A1150615100001<br>
                甘肃卫视财富天下特约分析师，善于通过“大势、题材、资金、事件、盘口”五重驱动分析狙击短线个股！
            </div>
        </div>
    </div>
    <div class="teacher">
        <div class="name">闵庆华</div>
        <div class="uf detail">
            <div class="pic">
                <img class="pic" src="image/teachers/3.png">
            </div>
            <div class="uf-f info">
                首席策略分析师<br>
                知名电视财经栏目特邀嘉宾、主流财经媒体专栏作家。继承和发展了趋势理论，坚信“顺势交易、稳健增长”。
            </div>
        </div>
    </div>
    <div class="teacher">
        <div class="name">殷永军</div>
        <div class="uf detail">
            <div class="pic">
                <img class="pic" src="image/teachers/2.png">
            </div>
            <div class="uf-f info">
                首席研究员<br>
                执业证号：A1150616110004<br>
                北京理工大学硕士，曾任香港滚雪球投资管理有限公司（KVB）研发总监。十余年机构研究生涯，准确把握市场脉搏。
            </div>
        </div>
    </div>
    <div class="teacher">
        <div class="name">柴德省</div>
        <div class="uf detail">
            <div class="pic">
                <img class="pic" src="image/teachers/5.png">
            </div>
            <div class="uf-f info">
                股市心态行为理论专家<br>
                执业证号：A1150612120001<br>
                曾任国信证券研究员、南京首华投资咨询公司研究经理，深谙技术分析及大资金运作手法，选股选时精准独到。
            </div>
        </div>
    </div>
    <div class="teacher">
        <div class="name">吴军</div>
        <div class="uf detail">
            <div class="pic">
                <img class="pic" src="image/teachers/6.png">
            </div>
            <div class="uf-f info">
                中国首批注册分析师<br>
                执业证号：A1150617070002<br>
                研究证券、期货、外汇、期权近30年，在中国银河证券、大摩投资等多家重量级金融机构长期负责证券研究工作。
            </div>
        </div>
    </div>
    <div class="teacher">
        <div class="name">袁超</div>
        <div class="uf detail">
            <div class="pic">
                <img class="pic" src="image/teachers/7.png">
            </div>
            <div class="uf-f info">
                CFA level2 candidate<br>
                执业证号：A1150615080001<br>
                国家高端金融人才，多年实战生涯，始终坚持“大势为先定战略、内在价值为导向、成长空间是方向”的操作理念。
            </div>
        </div>
    </div>
    <div class="teacher">
        <div class="name">程超</div>
        <div class="uf detail">
            <div class="pic">
                <img class="pic" src="image/teachers/1.png">
            </div>
            <div class="uf-f info">
                中国科学院硕士<br>
                执业证号：A1150612100001<br>
                擅于结合物理学模型和金融工程运作于证券投资领域，凭借其稳健的超高对冲收益率赢得了“阿尔法王子”的美誉。
            </div>
        </div>
    </div>
    <div class="teacher">
        <div class="name">常国林</div>
        <div class="uf detail">
            <div class="pic">
                <img class="pic" src="image/teachers/12.png">
            </div>
            <div class="uf-f info">
                金牌分析师<br>
                执业证号：A1150616120002<br>
                曾任职国内知名投资机构，十年实盘操作经验，精通私募大佬操盘手法，通过盘口变化迅速判断主力资金动向。
            </div>
        </div>
    </div>
    <div class="teacher">
        <div class="name">王俊</div>
        <div class="uf detail">
            <div class="pic">
                <img class="pic" src="image/teachers/8.png">
            </div>
            <div class="uf-f info">
                金牌分析师<br>
                执业证号：A1150617060002<br>
                曾就职于国泰君安、中证报等一线金融机构，10多年投资经验总结出一套适应于Ａ股的 “超高胜算值分析系统”。
            </div>
        </div>
    </div>
    <div class="teacher">
        <div class="name">舒晓飞</div>
        <div class="uf detail">
            <div class="pic">
                <img class="pic" src="image/teachers/9.png">
            </div>
            <div class="uf-f info">
                金牌分析师<br>
                执业证号：A1150613120001<br>
                南京师范大学金融学专业，2005年涉入市场，精通基本面分析和技术分析数学建模，具有极强的热点前瞻性。
            </div>
        </div>
    </div>


</div>

<script type="text/javascript">

    $(document).ready(function () {
        //点击关闭弹窗
        $(".CLOSE").click(function () {
            $(".POP").slideUp();
        });

        //点击老师
        $(".teacher .name").click(function () {
            var $name = $(this);
            var $teacher = $name.parents(".teacher");
            var ctrlClass = "hl";
            if ($teacher.hasClass(ctrlClass)) {
                $teacher.removeClass(ctrlClass);
            } else {
                $teacher.addClass(ctrlClass).siblings(".teacher").removeClass(ctrlClass);
            }
        })
    });

    //显示弹窗
    function showPop(str) {
        var $Pop;
        switch (str) {
            case "teacher":
                $Pop = $("#teacher");
                break;
            case "code":
                $Pop = $("#code");
                break;
            case "course":
                $(".closeBk").slideDown();
                $Pop = $("#course");
                break;
        }
        $("#mask").show();//透明黑色背景
        $Pop.slideDown();//显示弹窗
        $Pop.scrollTop(0);//滚动条复位
    }

    //播放时隐藏videoBy,显示控制器
    function videoBy(ele, isShow) {
        var $ele = $(ele);
        var $videoBy = $ele.parent().find('.videoBy');
        if (isShow == 0) {
            //暂停事件
            $videoBy.show();
            $ele.removeAttr("controls");
        } else {
            //播放事件
            $videoBy.hide();
            $ele.attr("controls", "controls");
        }
    }

    //播放或暂停视频
    function videoPlay(ele, e) {
        e.preventDefault();
        e.stopPropagation();
        var video = ele;
        if (!video.paused) {
            video.pause();
        } else {
            video.play();
        }
    }

    //当浏览器尝试获取媒体数据，但数据不可用时(直播节结束了)
    function stalled() {
        alert("直播已结束！");
//        $("#videoStatus").html("已结束").removeClass("winColor").addClass("warnColor");
    }

    //检测当前时间段是否在直播中
    function checkCourseTimer() {

        $(".liveCourse tr").each(function (index, item) {
            var title = ($(item).find("td.liveTitle").html());
            var timer = $(item).find("td.liveTimer").html();
            var str = timer.split("-");
            var beginTime = $.trim(str[0]);
            var endTime = $.trim(str[1]);
            var week = new Date().getDay();
            //判断当前时间在周一至周五之间，且在对应的时间段，显示直播中
            if (week > 0 && week < 6 && time_range(beginTime, endTime)) {
                $(item).addClass("hl");
                $(".videoInfo .title").html(title);
            }
        });

        function time_range(beginTime, endTime) {
            var strb = beginTime.split(":");
            if (strb.length != 2) {
                return false;
            }

            var stre = endTime.split(":");
            if (stre.length != 2) {
                return false;
            }

            var b = new Date();
            var e = new Date();
            var n = new Date();

            b.setHours(strb[0]);
            b.setMinutes(strb[1]);
            e.setHours(stre[0]);
            e.setMinutes(stre[1]);

            if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
                return true;
            } else {
                return false;
            }
        }

    }
    checkCourseTimer();
    //定时器
    setInterval(checkCourseTimer, 1000 * 60);
</script>
</body>
</html>